<!--
 * @Description: 我的收藏
 * @Author: zhaoxiaoyang & seadon
 * @LastEditors: seadon
 * @Date: 2021-07-19 21:33:05
 * @LastEditTime: 2021-07-21 16:57:56
-->
<template>
	<div class="favorite">
		<a-card :loading="getLoading">
			<template #title>
				<h4 class="pok-card-title">
<!--					<div class="title-img">-->
<!--						<img src="@/assets/images/favorite.svg" />-->
<!--					</div>-->
          <i
            class="shu-icon3"
          ></i>
					{{ $t('pages.home.favorite', '我的收藏') }}
				</h4>
			</template>
			<section style="margin: -24px">
				<ListDescription :list="favoriteList" @updateList="fetchFavoriteList" />
			</section>
		</a-card>
	</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeMount } from 'vue'
import ListDescription from '../ListDescription.vue'
import useFavorite from './useFavorite'
import { useHomeContext } from '@/entry_desktop/views/Home/hooks/useContext'

const { getLoading, favoriteList, fetchFavoriteList } = useFavorite()
const { homeEmitter } = useHomeContext()

onBeforeMount(() => {
	homeEmitter.on('custom:fetchFavoriteList', fetchFavoriteList)
})
onMounted(async () => {
	fetchFavoriteList()
})
</script>

<style lang="less" scoped>
.favorite {
	padding-bottom: 8px;
	width: 100%;
	background: @rok-white-bg;
  opacity: 0.8;
	border-radius: @rok-border-radius-big;
  margin-top:  @rok-basic-margin;
	:deep {
		.ant-card {
			border: 0;
			border-radius: @rok-border-radius-big;

			.ant-card-head {
				padding: 24px 24px 6px 24px;
				border-bottom: 0;

				.ant-card-head-title {
					padding: 0;
				}
			}
		}
	}
}

.shu-icon3 {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #4c78fc;
  vertical-align: middle;
  margin-right: 6px;
  margin-bottom: 2px;
  &:before {
    content: ''
  }
}
</style>
